<template>
    <div>
        <h1 style="text-align: center; color:chocolate;">修改员工数据</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>员工名称</td>
                    <td>
                        <input type="text" v-model="info.HouseName">
                    </td>
                </tr>
                <tr>
                    <td>员工编号</td>
                    <td>
                        <input type="text" v-model="info.Bianhao" disabled>
                    </td>
                </tr>
                <tr>
                    <td>头像</td>
                    <td>
                        <input type="file" @change="img">
                        <img :src="info.Touxiang" width="100" height="100" v-if="info.Touxiang!=''">
                    </td>
                </tr>
                <tr>
                    <td>手机号</td>
                    <td>
                        <input type="text" v-model="info.Shouji" maxlength="11">
                    </td>
                </tr>
                <tr>
                    <td>角色</td>
                    <td>
                        <select v-model="info.Juese">
                            <option value="">请选择</option>
                            <option :value="1">管理员</option>
                            <option :value="2">部门经理</option>
                            <option :value="3">普通员工</option>

                        </select>
                    </td>
                </tr>
                <tr>
                    <td>登录密码</td>
                    <td>
                        <input type="password" v-model="info.Pwd">
                    </td>
                </tr>
                <tr>
                    <td>状态</td>
                    <td>
                        <input type="radio" name="Zhungtai" :value="true" v-model="info.Zhungtai">启用
                        <input type="radio" name="Zhungtai" :value="false" v-model="info.Zhungtai">禁用
                    </td>
                </tr>
                <tr>
                    <td>备注</td>
                    <td>
                        <textarea cols="50" role="5" v-model="info.Biezhu"></textarea>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <button class="btn btn-success" @click="add">修改</button>
                        <button class="btn btn-info" @click="router.push('/employeeList')">返回</button>
                    </td>
                </tr>
            </tbody>
        </table>

    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted}from 'vue'
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';
import moment from 'moment';
const router=useRouter();
const route=useRoute();

let info:any=reactive({
  "HouseName": "",
  "Bianhao":moment(new Date).format("YYYYMMDD")+Math.random().toString().substring(3,6),
  "Touxiang": "",
  "Shouji": "",
  "Juese": '',
  "Pwd": "",
  "Zhungtai": true,
  "Biezhu": "",
})

onMounted(()=>{
    fantian()
})


//反填
const fantian=()=>{
    console.log(info);

    axios({
        url:'/api/Employee/Fantian',
        method:'get',
        params:{
            id:route.query.id
        }
    }).then(res=>{
        console.log(res);
        Object.assign(info,res.data)
        
    }).catch(err=>{
        console.log(err);
        
    })
    
}

//添加
const add=()=>{
    console.log(info);
    if(info.HouseName==''){
        alert('员工名称不能为空')
        return;
    }
    if(info.Touxiang==''){
        alert('员工头像必须上传')
        return;
    }
    if(info.Shouji==''){
        alert('员工手机号不能为空')
        return;
    }
    if(info.Juese==''){
        alert('角色不能为空')
        return;
    }
    if(info.Pwd==''){
        alert('密码不能为空')
        return;
    }
    if(info.Biezhu==''){
        alert('备注不能为空')
        return;
    }

    axios({
        url:'/api/Employee/HouseUpdate',
        method:'put',
        data:info
    }).then(res=>{
        console.log(res);
        if(res.data>0){
            alert('修改成功')
            router.push('/employeeList')
        }else if(res.data==-1){
            alert('员工姓名已存在')

        }else{
            alert('修改操作失败')
        }
        
    }).catch(err=>{
        console.log(err);
        
    })
    
}


//图片上传
const img=(e:any)=>{
    console.log(e);

    var f=e.target.files[0]
    var t=new FormData()
    t.append('file',f)
    axios({
        url:'/api/Imgse/Imgse',
        method:'post',
        data:t
    }).then(res=>{
        console.log(res);
        if(res.data=='图片格式不正确'){
            alert('图片格式不正确');
        }else if(res.data=='图片大于2M'){
            alert('图片大于2M')

        }
        info.Touxiang=res.data
        
    }).catch(err=>{
        console.log(err);
        
    })
    
}

</script>

<style scoped>
button{
    margin: 0 5px;
}
</style>